<template>
  <div class="aaaaaaaaaa">
    <span style="color: red">{{ count }}</span>
    <button @click="count++">Many Myths are based on truth</button>
  </div>

  <ToolMenus />
</template>

<script lang="ts">
import {
  provide,
  ref,
} from 'vue'
import type {
  PlasmoCSConfig,
  PlasmoGetInlineAnchor,
  PlasmoMountShadowHost,
  PlasmoGetShadowHostId,
} from "plasmo"

import ToolMenus, { ToolMenusCssText } from '~/components/ToolMenus'

// https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=zh-cn#static-declarative
export const config: PlasmoCSConfig = {
  matches: ["https://www.xiaohongshu.com/*"],
  // world 设置为 MAIN 时，chrome.i18n 不可用
  // world: 'MAIN',
  run_at: 'document_start',
}

const getInlineAnchor: PlasmoGetInlineAnchor = () =>
  document.querySelector("body")

const mountShadowHost: PlasmoMountShadowHost = ({ anchor, shadowHost }) => {
  anchor!.element!.insertBefore(shadowHost!, anchor!.element!.firstChild)
}

const HOST_ID = "engage-csui-xhs-search"
export const getShadowHostId: PlasmoGetShadowHostId = () => HOST_ID

export const getStyle = () => {
  const style = document.createElement("style")
  const cssList = [
    ToolMenusCssText
  ]
  style.textContent = cssList.join('\n')
  return style
}

const DP_CODE = 'xhs'

export default {
  plasmo: {
    getInlineAnchor,
    mountShadowHost,
    getShadowHostId,
    getStyle,
  },
  components: {
    ToolMenus
  },
  setup() {
    provide('hostId', `#${HOST_ID}`)
    provide('dpCode', DP_CODE)

    const count = ref(0)
    const count1 = ref(0)

    return {
      count,
      count1
    }
  },
}
</script>

<style></style>
